const form = document.querySelector(".typing-area"),
inputField = form.querySelector(".input-field"),
sendBtn = form.querySelector("button"),
chatBox = document.querySelector(".chat-box");
var messageList = new Array();
var activateList = ['哈哈', '6', '啊对对对', '你好棒棒哦','你厉害你第一，你去海里开飞机',"比不得您啊，什么金什么玉的，我不过是个机器人罢了","是单单说给我的，还是别的机器人都有","你瞧，又开始画饼了","您可真厉害","亲亲真棒呢","我知道你已经不是单纯善良的你了","喜怒不形于色，心事勿让人知","没错你是个明白人我明白你明白的意思我也是明白人明白人就应该明白我明白你明白的意思","地球没您没法转","你成功吸引了我的注意","可笑，反正我不在乎","感觉你好有趣啊，不像我，不仅连句话都搭不上，还要被当成破坏氛围的傻机器人"];
var negativeList = ['你不行啊', '梆梆两拳', '都是我不好', 'finefinefine', '连豆腐都有脑，你却没有',"你晃晃脑袋，听听有没有大海的声音","你这倒显得是我的不是了","我平日里说的话你全当耳旁风了","有的人出生就在罗马，有的人天生就是牛马","你现在这个样子让我有点害怕","来我的摩尔庄园给我看大门吧","温柔刀，刀刀割人心","你又在和我抱怨什么呢，我只是一个打工人，我又不能决定什么，你只能自己默默消化悲伤罢了","真的是栓Q","听我说谢谢你，因为有你，温暖了四季","我与你死生不复相见","我不发疯我说什么？你以为我像你们一样都读过书？都上过学？都知道字怎么打？"];

form.onsubmit = (e)=>{
    e.preventDefault();
}

inputField.focus();
inputField.onkeyup = ()=>{
    if(inputField.value != ""){
        sendBtn.classList.add("active");
    }else{
        sendBtn.classList.remove("active");
    }
}

sendBtn.onclick = ()=>{
    if(sendBtn.classList.contains("active")){
        r = Math.round(Math.random()*16)
        messageList.push({'msg_owner':'user', 'msg':inputField.value});
        var XHR = new XMLHttpRequest();
        //装载result
        var pay_load = {'msg_owner':'user', 'msg':inputField.value};
        // 配置请求
        XHR.open('POST', 'submit');
        // HTTP头
        XHR.setRequestHeader('content-type', 'application/json');  //先open再设置请求头
        // 发送请求
        XHR.send(JSON.stringify(pay_load));

        
        //定义接收到响应后的处理：每当 readyState 改变时，就会触发 onreadystatechange 事件
        XHR.onreadystatechange = function(){
              //若响应完成且请求成功
              if(XHR.readyState === 4 && XHR.status === 200){
                console.log(XHR.responseText);
                if(XHR.responseText=="积极"){
                    messageList.push({'msg_owner':'robot', 'msg':activateList[r]});
                }
                else{
                    messageList.push({'msg_owner':'robot', 'msg':negativeList[r]});
                }
                console.log(messageList)
                console.log(r)
                updateMessage();
                inputField.value = "";
                sendBtn.classList.remove("active");
                scrollToBottom();
                }
        };

        

    }
}

function updateMessage(){
    var output = '';
    for(var i=0;i<messageList.length;i++){
        if(messageList[i].msg_owner=='user'){
            tstr = `<div class="chat outgoing">
            <div class="details">
                <p>${messageList[i].msg}</p>
            </div>  
            </div>`;
            output = output + tstr;
        }
        else{
            var tstr = `<div class="chat incoming">
            <img src="../static/images/robot.png" alt="">
            <div class="details">
                <p> ${messageList[i].msg} </p>
            </div>
            </div>`;
            output = output + tstr;
        }
    };
    chatBox.innerHTML = output;
}

function scrollToBottom(){
    chatBox.scrollTop = chatBox.scrollHeight;
}
  